<template>
  <el-select
    v-model="orders"
    popper-class='u-applySelectOrder'
    style='width: 500px'
    @change='update'
    multiple>
    <el-option :disabled="true" :value='123' class='firstColumn' key='none'>
      <span>手机号</span><span>姓名</span><span>课程</span><span>收费</span><span>删除</span>
    </el-option>
    <el-option
      v-for="(item, i) in selectOrders"
      :key="i"
      :label="item.buyer_name"
      :value="item.order_id">
      <span>{{ item.buyer_phone }}</span><span>{{ item.buyer_name }}</span><span>{{ item.order_name }}</span><span>{{ item.detail_list[0].price }}</span><span><i class='el-icon-close' @click='close(i)'></i></span>
    </el-option>
  </el-select>
</template>

<script>
  export default {
    name: 'u-applySelectOrder',

    props: ['selectOrders'],

    watch: {
      selectOrders() {
        this.orders = this.selectOrders.map(v => v.order_id)
        console.log(this.orders)
      }
    },

    data() {
      return {
        orders: []
      }
    },

    methods: {
      close(i) {
        // this.$emit('getData', { type: 'delete', index: i })
        console.log(i)
        this.orders.splice(i, 1)
        console.log(this.orders)
        this.update()
      },

      update() {
        console.log(this.orders)
        this.$emit('update', this.orders)
      }
    }
  }
</script>

<style lang='less'>
.u-applySelectOrder {
  .el-select-dropdown__item  {
    display: flex;
    text-align: center;
    span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      &:nth-child(1), &:nth-child(2) {
        flex: 1;
      }
      &:nth-child(3), &:nth-child(4), &:nth-child(5) {
        width: 50px;
      }
    }
  }
}
</style>